<template>
  <div>
    <div class="cbody">
      <div class="info">
        <div class="head">
          <div class="con">
            <div class="word">
            <div class="count">¥ {{finInfo.selectAllPrice.toFixed(2)}}</div>
            <div class="name">总收入</div>
            </div>
            <img src="./../../images/main/01.png" alt="">
          </div>
          <div class="con">
            <div class="word">
            <div class="count">¥ {{finInfo.frozenPrice.toFixed(2)}}</div>
            <div class="name">冻结金额</div>
            </div>
            <img src="./../../images/main/02.png" alt="">
          </div>
          <div class="con">
            <div class="word">
            <div class="count">¥ {{finInfo.balance.toFixed(2)}}</div>
            <div class="name">账户余额</div>
            </div>
            <img src="./../../images/main/03.png" alt="">
          </div>
          <div class="con">
            <div class="word">
            <div class="count">¥ {{finInfo.tiPrice.toFixed(2)}}</div>
            <div class="name">已提现金额</div>
            </div>
            <img src="./../../images/main/04.png" alt="">
          </div>
           <div class="tixian">
        <el-button round type="primary" @click="goCash()">提现</el-button>
      </div>
        </div>
      </div>
      <div class="change">
        <div :class="aChange == 0 ? 'aced' : ''" @click="tabs(0)">收入</div>
        <div :class="aChange == 1 ? 'aced' : ''" @click="tabs(1)">提现</div>
      </div>
      
    
    <el-table v-if="aChange == 0" :data="finList" stripe style="width: 100%">
        <el-table-column align="center" prop="activity_title" label="活动名称"></el-table-column>
        <el-table-column align="center" prop="area" label="活动报名金额">
          <template slot-scope="scope">
            <div>
              {{scope.row.bao_price.toFixed(2)}}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center"  label="分成比例">
          <template slot-scope="scope">
            <div>
              {{scope.row.percentage}}%
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center"  label="平台佣金">
          <template slot-scope="scope">
            <div>
              {{scope.row.ping_price.toFixed(2)}}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center"  label="分成金额">
          <template slot-scope="scope">
            <div>
              {{scope.row.fen_price.toFixed(2)}}
            </div>
          </template>
        </el-table-column>
    </el-table>
    <el-table v-else :data="txList" stripe style="width: 100%">
        <el-table-column align="center"  label="金额">
          <template slot-scope="scope">
            <div>
              {{scope.row.price.toFixed(2)}}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="registerTime" label="申请时间">
          <template slot-scope="scope">
            <div>
              <p>{{setDate(scope.row.time)}} {{setTime(scope.row.time)}}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center"  label="状态">
          <template slot-scope="scope">
            <div>
              <div v-if="scope.row.states == 0">待审核</div>
          <div v-if="scope.row.states == 1">未打款</div>
          <div v-if="scope.row.states == 2">已完成</div>
          <div v-if="scope.row.states == 3">已驳回</div>
            </div>
          </template>
        </el-table-column>
    </el-table>
    <div class="clear"></div>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="params.page"
      :page-size="params.limit"
      :total="params.total"
      background
      style="text-align:center;margin:20px auto;"
      layout="prev, pager, next"
    ></el-pagination>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import qs from "qs"; // 将请求转换成form 表单提交形式
export default {
  data() {
    return {
      params: {
        keyWord: "",
        states: 0,
        limit: 10,
        page: 1,
        total: 0,
        type: 2,
        serviceId: this.$store.state.userId
      },
      finInfo: {},
      finList: [],
      txList: [],
      aChange: 0
    };
  },
  methods: {
    /**
     * 分页
     */
    handleCurrentChange: function(index) {
      let that = this;
      that.params.total = index;
      that.getFinList();
      that.getFinTx();
    },
    /**
     * 提现
     */
    goCash: function() {
      this.$router.push({
        path: "/main/initiation"
      });
    },
    /**
     * 切换
     */
    tabs: function(num) {
      this.aChange = num;
      if (num == 0) {
        this.getFinList();
      } else {
        this.getFinTx();
      }
    },
    /**
     * 审核
     */
    examine: function(id, num) {
      let that = this;
      axios({
        method: "post",
        url: `/tWithdrawal/updateStates`,
        data: qs.stringify({
          id: id,
          states: num
        })
      })
        .then(res => {
          if (res.data.code == 0) {
            that.getFinList();
          } else {
            this.$alert(res.data.msg);
          }
        })
    },

    /**
     * 查询提现统计 withdrawal/selectByPartnerId
     */
    getFinTx: function(num) {
      let that = this;
      axios({
        method: "post",
        url: `/withdrawal/selectByServiceId`,
        data: qs.stringify(that.params)
      })
        .then(res => {
          if (res.data.code == 0) {
            that.txList = res.data.data.records;
            that.params.total = res.data.count;
          } else {
            that.$alert(res.data.msg);
          }
        })
    },
    /**
     *  查询财务统计
     */
    getFinDetail: function(num) {
      let that = this;
      axios({
        method: "post",
        url: `/withdrawal/selectCaiTong`,
        data: qs.stringify(that.params)
      })
        .then(res => {
          console.log(res);
          if (res.data.code == 0) {
            that.finInfo = res.data.data;
          } else {
            that.$alert(res.data.msg);
          }
        })
    },
    /**
     *  查询财务列表
     */
    getFinList: function(num) {
      let that = this;
      axios({
        method: "post",
        url: `withdrawal/selectIncomeList`,
        data: qs.stringify(that.params)
      })
        .then(res => {
          console.log(res);
          if (res.data.code == 0) {
            that.finList = res.data.data;
            that.params.total = res.data.count;
          } else {
            that.$alert(res.data.msg);  
          }
        })
    },
    /*
     * 根据时间毫秒数 返回年月日
     */
    setDate: function(str) {
      let times = new Date(str);
      return `${times.getFullYear()}-${
        times.getMonth()+1 < 10 ? "0" + (times.getMonth()+1) : times.getMonth()+1
      }-${times.getDate() < 10 ? "0" + times.getDate() : times.getDate()}`;
    },
    /**
     * 根据时间毫秒数 返回时分秒
     */
    setTime: function(str) {
      let times = new Date(str);
      return `${
        times.getHours() < 10 ? "0" + times.getHours() : times.getHours()
      }:${
        times.getMinutes() < 10 ? "0" + times.getMinutes() : times.getMinutes()
      }:${
        times.getSeconds() < 10 ? "0" + times.getSeconds() : times.getSeconds()
      }`;
    }
  },
  mounted() {
    this.getFinList();
    this.getFinDetail();
  }
};
</script>
<style scoped>.titles {
  height: 60px;
  line-height: 60px;
  color: #333;
  font-size: 14px;
}
.head .tixian {
  width: 120px;
  height: 98px;
  line-height: 98px;
  padding:0px;
  text-align: center;
  float: right;
  background: none;
}
.change {
  // height: 70px;
  overflow: hidden;
  line-height: 40px;
  // border-bottom: 1px solid #ddd;
  margin-bottom: 10px;
}
.change > div {
  float: left;
  width: 70px;
  margin-left: 10px;
  text-align: center;
  font-size: 14px;
  color: #333;
  font-weight: 500;
  cursor: pointer;
}
.change > div :last-of-type {
  margin-left: 100px;
}
.change .aced {
  border-bottom: 2px solid #4B74FF;
  color: #4B74FF;
  box-sizing: border-box;
}


.head {
  margin-top: 20px;
  display: flex;
  width: 1050px;
}
.head > div {
  flex: 1;
  height: 98px;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  display: inline-block;
  margin: 0 5px;
}

.name {
  font-size: 14px;
  color: #252631;
  height: 24px;
  text-align: center;
}
.count {
  height: 50px;
  font-size: 22px;
  color: #4b74ff;
  text-align: center;
  line-height: 50px;
  margin-top: 10px;
}
.word {
  width: 55%;
  float: left;
}
.con img {
  float:right;
  width: 25%;
  margin-top: 20px;
  margin-right: 10%;
}
.tabs {
  margin-top: 38px;
  border: 1px solid #dddddd;
  width: 398px;
  height: 67px;
  display: flex;
  font-size: 20px;
}
.tabs > div {
  flex: 1;
  font-size: 20px;
  height: 67px;
  line-height: 67px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}
.tabs:first-child {
  border-right: 1px solid #ddd;
}
.tabs .tabac {
  background: #e0eefe;
}
</style>


